
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />

    <meta name="viewport" content="width=device-width , initial-scale=1 , shrink-to-fit=no"/>
    <title>本地安装Bootstrap</title>
    <!-- 外联Bootst基本样式 -->
    <link rel="stylesheet" type="text/css" href="bootstrap-4.5.0/dist/css/bootstrap.css"/>
    <!-- 外联自定义样式文件 -->

</head>
<body>
<div id="da_div" class="container">
    <table class="table border">
        <tr class="text-center">
            <td class="colspan-6 "> <strong>图书馆书名册</strong></td>
        </tr>
        <tr>
           <td>书名</td>
           <td>作者</td>
           <td>价格</td>
           <td>编号</td>
            <td>删除操作</td>
            <td>修改操作</td>
        </tr>
        <tr v-for="include in ku">
            <td v-show="!include.xiu_gai">{{include.bn}}</td>
            <td v-show="include.xiu_gai"><input type="text" v-model="include.bn"/></td>
            <td v-show="!include.xiu_gai">{{include.maker}}</td>
            <td v-show="include.xiu_gai"><input type="text" v-model="include.maker"/></td>
            <td v-show="!include.xiu_gai">{{include.prices}}</td>
            <td v-show="include.xiu_gai"><input type="text" v-model="include.prices"/></td>
            <td v-show="!include.xiu_gai">{{include.numb}}</td>
            <td v-show="include.xiu_gai"><input type="text" v-model="include.numb"/></td>
            <td>
            <input type="button" class="btn btn-info" value="删除" v-on:click="del(include.numb)"/>
        </td>
            <td>
                <input type="button" class="btn btn-info " value="修改" v-on:click="include.xiu_gai=!include.xiu_gai"/>
            </td>
        </tr>
    </table>
    <p>添加操作：</p>
    <p>书名：<input type="text" v-model="bn" /></p>
    <p>作者：<input type="text" v-model="maker"/></p>
    <p>价格：<input type="text" v-model="prices"/></p>
    <p>编号：<input type="text" v-model="numb"/></p>
    <input type="button" class="btn btn-success" value="添加" v-on:click="injoin">


</div>
</div>

<script src="js/vue.js"  type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    var a=new Vue({
        el:'#da_div',
        data:{
            bn:'',
            maker:'',
            prices:'',
            numb:'',

           ku: [
               {
                   bn:'被讨厌的勇气',
                   maker:'美国XXX',
                   prices:'26.5',
                   numb:1,
                   xiu_gai:false
               },
               {
                   bn:'被讨厌的勇气',
                   maker:'美国XXX',
                   prices:'26.5',
                   numb:2,
                   xiu_gai:false
               },
               {
                   bn:'被讨厌的勇气',
                   maker:'美国XXX',
                   prices:'26.5',
                   numb:3,
                   xiu_gai:false
               },
               {
                   bn:'被讨厌的勇气',
                   maker:'美国XXX',
                   prices:'26.5',
                   numb:4,
                   xiu_gai:false
               },

           ]
        },
        methods: {
            del: function (numb) {
                for (var i = 0; i < this.ku.length; i++) {
                    if (this.ku[i].numb === numb) {
                        this.ku.splice(i, 1);
                    }
                }
            },


            injoin: function () {
              var xin_shu={};
              xin_shu.bn=this.bn;
              xin_shu.maker=this.maker;
                xin_shu.prices=this.prices;
                xin_shu.numb=this.numb;
                xin_shu.xiu_gai=false;
              this.ku.push(xin_shu);

                this.bn = "";
                this.maker = "";
                this.prices = "";
                this.numb = "";

            }

        }
    })

</script>
<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
<!-- Bootstrap插件依赖文件 -->
<script src="bootstrap-4.5.0/dist/js/bootstrap.bundle.js" type="text/javascript" charset="utf-8"></script>
<!-- jQuery插件 -->
<script src="bootstrap-4.5.0/dist/js/bootstrap.js" type="text/javascript" charset="utf-8"></script>

</body>
</html>